import { Link } from 'react-router-dom'
import HotMovieLately from '../components/HotMovieLately'
import HotRecommend from '../components/HotRecommend'
import HotReflect from '../components/HotReflect'
import { getInterfaceData, getHotTags, getHotMoviesType } from '../api/api'
import '../index.css'
import { useEffect, useState } from 'react'

const Index = () => {
  const [hotReflectData, setHotReflectData] = useState([])
  const [weekMouthsteleData, setWeekMouthsteleData] = useState([])
  const [hotMovieTagData, setHotMovieTagData] = useState([]) // 热门电影标签
  const [hotTvTagData, setHotTvTagData] = useState([]) // 热门电视剧标签
  const [hotMovieDataList, setHotMovieDataList] = useState([])
  const [hotTvDataList, setHotTvDataList] = useState([])
  useEffect(() => {
    const hotReflectPromise = getInterfaceData('/on-going') // 热映列表
    const weekMouthstelePromise = getInterfaceData('/koubei') //一周口碑排行
    const hotMovieTagPromise = getHotTags('movie', 'index') // 热门电影标签tab
    const hotTvTagPromise = getHotTags('tv', 'index') // 热门电视剧标签tab
    const hotMovieDataPromise = getHotMoviesType('movie', '热门')
    const hotTvDataPromise = getHotMoviesType('tv', '国产剧')

    Promise.all([hotReflectPromise, weekMouthstelePromise, hotMovieTagPromise, hotTvTagPromise, hotMovieDataPromise, hotTvDataPromise]).then(
      ([hotReflectData, weekMouthsteleData, hotMovieTagData, hotTvTagData, hotMovieDataList, hotTvDataList]) => {
        setHotReflectData(hotReflectData.data)
        setWeekMouthsteleData(weekMouthsteleData.data)
        setHotMovieTagData(hotMovieTagData.data.tags)
        setHotTvTagData(hotTvTagData.data.tags)
        setHotMovieDataList(hotMovieDataList.data)
        setHotTvDataList(hotTvDataList.data)
      }
    )
  }, [])
  const handleClickTagCallBack = (type, tag) => {
    if (type === '电影') {
      return getHotMoviesType(type, tag).then(({ data: hotMovieDataList }) => setHotMovieDataList(hotMovieDataList))
    } else {
      return getHotMoviesType(type, tag).then(({ data: hotTvDataList }) => setHotTvDataList(hotTvDataList))
    }
  }
  return (
    <>
      <div className="move-main">
        <div className="w-1040 mt-5">
          <img src={require('../assets/images/a6849184de427f3.jpg')} alt="" className="move-bannerSize" />
          {/* 热映Movie */}
          <div className="row mt-3">
            <div className="col-8">
              <HotReflect hotReflectData={hotReflectData} />
              <HotMovieLately title={'电影'} hotMovieDataList={hotMovieDataList} hotMovieTagData={hotMovieTagData} handleClickTagCallBack={handleClickTagCallBack} />
              <HotMovieLately title={'电视剧'} hotMovieDataList={hotTvDataList} hotMovieTagData={hotTvTagData} handleClickTagCallBack={handleClickTagCallBack} />
              <HotRecommend />
            </div>
            <div className="col-4 sider-bar pl-5">
              <div className="rating-answer f-size-13 mb-3">
                <a href="" className="a-color">
                  豆瓣电影评分八问
                </a>
              </div>
              <div className="week-mouthstele mb-5">
                <div className="border-line pb-3 mb-1">
                  <div className="screening-column row">
                    <div className="col-10 d-flex align-content-center">
                      <span className="hotPlay-txt mr-2">一周口碑榜</span>
                      <span>
                        <Link to={''} className="a-color f-size-13 mr-2">
                          更多榜单»
                        </Link>
                      </span>
                    </div>
                  </div>
                </div>
                <ul>
                  {weekMouthsteleData.map((item, index) => (
                    <li className="d-flex pt-2 pb-2 border-line pl-2" key={item.id}>
                      <span className="f-size-13 text-center orderNum">{index + 1}</span>
                      <div className="pl-1 f-size-13">
                        <a href="" className="a-color ">
                          {item.title}
                        </a>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="hotSliceList pt-2 mb-5">
                <div className="border-line pb-3 mb-1">
                  <div className="screening-column row">
                    <div className="col-10 d-flex align-content-center">
                      <span className="hotPlay-txt mr-2">热门片单</span>
                    </div>
                  </div>
                </div>
                <ul>
                  <li className="d-flex pt-2 pb-3 border-line d-flex justify-content-between">
                    <div className="pl-1 f-size-13">
                      <a href="" className="a-color">
                        Bonjour la France 电影篇
                      </a>
                    </div>
                    <span className="commend-slice sreenTab-color f-size-13">16推荐</span>
                  </li>
                  <li className="d-flex pt-2 pb-3 border-line d-flex justify-content-between">
                    <div className="pl-1 f-size-13">
                      <a href="" className="a-color">
                        Bonjour la France 电影篇
                      </a>
                    </div>
                    <span className="commend-slice sreenTab-color f-size-13">31推荐</span>
                  </li>
                </ul>
              </div>
              {/* 合作联系 */}
              <div className="cooperative-contact mb-5">
                <div className="border-line pb-3 mb-3">
                  <div className="screening-column row">
                    <div className="col-10 d-flex align-content-center">
                      <span className="hotPlay-txt mr-2">合作联系</span>
                    </div>
                  </div>
                </div>
                <div className="mailbox">
                  <p className="f-size-13">
                    电影合作邮箱:
                    <img src={require('../assets/images/email_movie.png')} className="address ml-2" />
                  </p>
                  <p className="f-size-13">
                    电视剧合作邮箱:
                    <img src={require('../assets/images/email_tv.png')} className="address ml-2" />
                  </p>
                </div>
              </div>
              {/* 关注我们 */}
              <div className="follow">
                <div className="border-line pb-3 mb-3">
                  <div className="screening-column row">
                    <div className="col-10 d-flex align-content-center">
                      <span className="hotPlay-txt mr-2">关注我们</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Index
